<script setup>
  import { ref, reactive, toRef, onMounted } from "vue";
  import { useRoute, useRouter } from 'vue-router';
  import {postTagDetail,postTagDel,postTagUpdGroup } from '@/api'
  const Route =useRoute();
  const router = useRouter()
  const ruleFormRef = ref()
  //获取到值
  console.log('获取到的id值',Route.query.id)
  const currentId = ref('')
  onMounted(()=>{
       currentId.value = Route.query.id
      console.log("获取到的参数",currentId );
  })
  const formSize = ref('default')
  const ruleForm = reactive({
    biaoqian: '',
    rule:[
      { id: '',  isShow: true, name: '' }
      ],
    deleteid:[]
  });
  // 修改拉取数据
  const getInfo = () => {
    console.log(Route.query.id);
    if(Route.query.id != undefined){
      postTagDetail({
        groupId:Route.query.id
      }).then(res=>{
        ruleForm.biaoqian=res.data
        ruleForm.rule=res.data.tag
        console.log("获取到的数值" ,ruleForm.rule);
        ruleForm.id=Route.query.id
      })
    }
  }
  getInfo()
  
  // 添加子标签并保存
  
  const onSubmit = async (formEl) => {
      if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        console.log(ruleForm.rule,ruleForm.deleteid,ruleForm.biaoqian.name);
        // var tagList = []
        // ruleForm.rule.forEach(item=>{
        //   tagList.push(item.tag_name)
        // })
        postTagUpdGroup({ 
          groupId:Route.query.id,
          groupName:ruleForm.biaoqian.group_name,
          tag:ruleForm.rule,
          removetTag:ruleForm.deleteid
        }).then((res) => {
          console.log(res, '3333')
          ElMessage({ message: '提交成功', type: 'success' })
          router.push('customerLabel')
        })
      } else {
        console.log('error submit!', fields)
        ElMessage({ message: '失败', type: 'error' })
      }
    })
  }
  // 取消按钮
  const cancelSubmit =()=>{
    ElMessage({ message: '取消成功', type: 'success' })
          router.push('customerLabel')
  }
  // 添加子标签
  const addInput = () => {
    ruleForm.rule.push({ name:''})
  }
  // 删除图标
  const deleteInput = (index) => {
    console.log(index);
    console.log('删除',ruleForm.rule)
    if(ruleForm.rule[index].tag_id){
      console.log('删除的索引',ruleForm.rule[index].tag_id)
      ElMessage({ message: '删除成功', type: 'success' })
      ruleForm.deleteid.push(ruleForm.rule[index].tag_id)
      ruleForm.rule.splice(index, 1)
    }else{
      ruleForm.rule.splice(index, 1)
    } 
  }
  // 删除标签组
  const deleteName = async (formEl) => {
      if (!formEl) return
    await formEl.validate((valid, fields) => {
      if (valid) {
        postTagDel({ 
          groupId:Route.query.id,
          // removetTag:ruleForm.deleteid, 
        }).then((res) => {
          console.log(res, '3333')
          // ruleForm.deleteid.push(ruleForm.rule[index].tag_id)
          ElMessage({ message: '删除成功', type: 'success' })
          router.push('customerLabel')
        })
      } else {
        console.log('error submit!', fields)
        ElMessage({ message: '删除失败', type: 'error' })
      }
    })
  }
  
  
  
  // 弹窗上移
  const popUp = (index) => {
    if (index != 0) {
      ruleForm.rule[index] = ruleForm.rule.splice(index - 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.push(ruleForm.rule.shift());
    }
  }
  // 弹窗下移
  const popDown = (index) => {
    if (index != ruleForm.rule.length - 1) {
      ruleForm.rule[index] = ruleForm.rule.splice(index + 1, 1, ruleForm.rule[index])[0];
    } else {
      ruleForm.rule.unshift(ruleForm.rule.splice(index, 1)[0]);
    }
  }
  </script>
  <template>
   <!-- 弹窗 -->
      <div class="allStyle">
            <div class="dialogTSY"> 修改客户标签组</div>
              <div class="formStyle">
            <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" :size="formSize">
              <el-form-item label="标签组名称:" label-width="150px" style="width: 500px">
                <el-input  v-model="ruleForm.biaoqian.group_name"  autocomplete="off" show-word-limit maxlength="15" />
              </el-form-item>
             <el-form-item label="标签名称:" label-width="150px">
                <div style="display: flex;" class="content-item" v-for="(item, index) in ruleForm.rule" :key="index">
                  <span>
                    <el-input v-model="item.tag_name" autocomplete="off" style="margin-bottom: 10px;width: 350px;"
                      show-word-limit maxlength="15" />
                  </span>
                  <!-- 后缀图标 -->
                  <span  v-if="ruleForm.rule.length !== 1">
                    <el-icon style="margin-left: 10px" @click="deleteInput(index)">
                      <Remove />
                    </el-icon>
                    <span style="margin-left: 10px" @click="popUp(index)"><i class="iconfont">&#xe61c;</i></span>
                    <span style="margin-left: 10px" @click="popDown(index)"><i class="iconfont">&#xe61b;</i></span>
                  </span>
                </div>
              </el-form-item>
              <el-form-item label-width="150px" @click="addInput">
                <p style="display: flex;margin-top: -10px;">
                  <el-icon color="#1890ff">
                    <CirclePlus />
                  </el-icon>
                <p style="color: #1890ff;margin-top: -9px;margin-left: 3px;">添加标签</p>
                </p>
              </el-form-item>
            </el-form>
            </div>
            <div class="addBottmStyle">
              <div style="color:#1890ff; font-size: 14px;" @click="deleteName(ruleFormRef)" >删除标签组</div>
              <div style="padding-right: 50px;">
                  <el-button @click="cancelSubmit">取消</el-button>
               <el-button  @click="onSubmit(ruleFormRef)" type="primary">确定</el-button>
              </div>
               
            </div>
      </div>
  </template>
  
  <style scoped>
  @import "../../../style/iconfont.css";
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
  }
  .allStyle{
      background-color: #ffffff;
      margin: 20px;
  }
  .dialogTSY {
    height: 30px;
    line-height: 30px;
    margin: 20px;
    
  }
  .formStyle{
      width: 700px;
      margin-top: 20px;
  }
  .addBottmStyle{
      display: flex;
      justify-content: space-between;
       margin-left: 20px;
      margin-bottom: 20px;
       width: 700px;
  }
  </style>